import React, { Component } from 'react'
import { createCode, setStore } from './util/index'
import { toast, ToastContainer } from 'react-toastify'
import api from './serve/api'
import close from './images/close.png'
import styles from './Login.module.scss'
import { withRouter } from 'react-router-dom'

class Login extends Component {

  constructor(props) {
    super(props)
    this.state = {
      userName: '',
      pwd: '',
      message: '',
      code: '',
      inputCode: ''
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentDidMount() {
    this.setState({
      code: createCode()
    })
  }
  
  onClose() {
    this.props.onClose()
  }

  onForget() {
    this.props.onForget()
    this.props.history.push('/mainPage/resetPwd')
  }

  handleSubmit(event) {
    console.log(this.state)
    event.preventDefault();
    if (this.state.inputCode !== this.state.code) {
      this.setState({
        message: '验证码不正确'
      })
      return
    }
    this.loginRequest()
  }

  async loginRequest() {
    const { userName, pwd } = this.state
    const data = await api.loginApi({ userName, userPwd: pwd, loginType: 1})
    if (data && data.code === '000000') {
      //存userId
      toast.success('登录成功!', {
        position: toast.POSITION.TOP_CENTER
      });
      setStore('zhikuFrontUserId', data.result.userInfo.id)
      setStore('zhikuFrontUserName', data.result.userInfo.user_name)
      setStore('zhikuFrontUserToken', data.result.token)
      this.props.loginSuccess()
    } else {
      this.setState({
        message: (data && data.message) || ''
      })
    }
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  resetCode() {
    this.setState({
      code: createCode()
    })
  }

  render() {
    return (
      <div className={styles.login_bg}>
        <div className={styles.login}>
          <div className={styles.title}>
            <span>欢迎登录湖北智库网</span>
            <img src={close} alt="" onClick={() => this.onClose()}/>
          </div>
          <div className={styles.login_content}>
            <div className={styles.message}>{this.state.message}</div>
            <form className={styles.form} onSubmit={this.handleSubmit}>
              <div className={styles.form_item}>
                <span>用户名</span>
                <input 
                  name="userName"
                  type="text"
                  required
                  value={this.state.userName}
                  placeholder="请输入用户名"
                  onChange={this.handleInputChange}
                />
              </div>
              <div className={styles.form_item}>
                <span>密码</span>
                <input 
                  name="pwd"
                  type="password"
                  required
                  value={this.state.pwd}
                  placeholder="请输入密码"
                  onChange={this.handleInputChange}
                />
              </div>
              <div className={styles.form_item}>
                <span>验证码</span>
                <input
                  name="inputCode"
                  required
                  style={{ width: 157, marginRight: 17 }} 
                  type="text" 
                  maxLength={6}
                  placeholder="请输入验证码"
                  value={this.state.inputCode}
                  onChange={this.handleInputChange}
                />
                <div className={styles.picbox} onClick={() => this.resetCode()}>
                  <span>{this.state.code}</span>
                </div>
              </div>
              <div className={styles.form_item}>
                <button type="submit">登录</button>
              </div>
            </form>
            <div className={styles.forget} onClick={() => this.onForget()}>忘记密码 ?</div>
          </div>
        </div>
        <ToastContainer />
      </div>
    )
  }
}

export default withRouter(Login)
